<script setup lang="ts">
// 审批操作栏全局组件
import { ref } from 'vue'

// Props定义
interface Props {
  // 流程ID，用于跳转链接
  processId: string
  // 是否显示操作栏
  show?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  show: true,
})

// Emits定义（简化为一个改变事件）
const emit = defineEmits<{
  (e: 'action-change', type: ActionType): void
}>()

// 定义操作类型联合类型
type ActionType = 'approve' | 'reject' | 'transfer' | 'addSign' | 'delegate'

// 内部定义默认的操作按钮配置
const defaultActions = [
  { name: '通过', color: '#22c55e' },
  { name: '拒绝', color: '#ff4d4f' },
  { name: '转派', color: '#0083ff' },
  { name: '加签', color: '#0083ff' },
  { name: '委派', color: '#0083ff' },
]

// action-sheet 显示状态
const showActionSheet = ref(false)

// 处理更多按钮点击
function handleMore() {
  showActionSheet.value = true
}

// 处理action-sheet取消事件
function handleActionSheetClose() {
  showActionSheet.value = false
}

// 处理通过按钮点击
function handleApprove() {
  emit('action-change', 'approve')
  uni.navigateTo({
    url: `/pages/approval/approve?id=${props.processId}`,
  })
}

// 处理拒绝按钮点击
function handleReject() {
  emit('action-change', 'reject')
  uni.navigateTo({
    url: `/pages/approval/reject?id=${props.processId}`,
  })
}

// 处理转派操作
function handleTransfer() {
  emit('action-change', 'transfer')
  uni.navigateTo({
    url: `/pages/approval/transfer?id=${props.processId}`,
  })
}

// 处理加签操作
function handleAddSign() {
  emit('action-change', 'addSign')
  uni.navigateTo({
    url: `/pages/approval/addSign?id=${props.processId}`,
  })
}

// 处理委派操作
function handleDelegate() {
  emit('action-change', 'delegate')
  uni.navigateTo({
    url: `/pages/approval/delegate?id=${props.processId}`,
  })
}

// 处理action-sheet选项点击
function handleActionClick(item: any) {
  // 确保showActionSheet关闭
  showActionSheet.value = false

  const actionName = item?.item?.name || item?.name
  if (!actionName)
    return

  switch (actionName) {
    case '通过':
      handleApprove()
      break
    case '拒绝':
      handleReject()
      break
    case '转派':
      handleTransfer()
      break
    case '加签':
      handleAddSign()
      break
    case '委派':
      handleDelegate()
      break
    default:
      // 对于默认配置外的操作，可以忽略
      console.warn('未处理的操作:', actionName)
      break
  }
}
</script>

<template>
  <template v-if="show">
    <!-- 占位 -->
    <view class="h-16" />
    <!-- 底部操作栏 -->
    <view class="action-bar fixed bottom-0 left-0 right-0 flex border-t border-gray-200 bg-white p-3">
      <button class="mr-2 flex-1 rounded-lg bg-green-500 py-2 text-white font-medium" @click="handleApprove">
        通过
      </button>
      <button class="mx-2 flex-1 rounded-lg bg-red-500 py-2 text-white font-medium" @click="handleReject">
        拒绝
      </button>
      <button class="ml-2 flex-1 rounded-lg bg-blue-500 py-2 text-white font-medium" @click="handleMore">
        更多
      </button>
      <!-- 使用wd-action-sheet组件实现更多操作菜单 -->
      <wd-action-sheet
        v-model="showActionSheet"
        :z-index="99999"
        class="wd-action-sheet z-99999"
        :actions="defaultActions"
        close-on-click-action
        cancel-text="取消"
        @close="handleActionSheetClose"
        @select="handleActionClick"
      />
    </view>
  </template>
</template>

<style lang="scss" scoped>
// 底部操作栏样式
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100; // 保持操作栏的z-index较低
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 12px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

// 按钮样式优化
.action-bar button {
  margin: 0 4px;
  font-size: 16px;
  border-radius: 8px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  &::after {
    border: none;
  }
}

// wd-action-sheet样式调整，避免被底部操作栏遮挡
:deep(.wd-action-sheet) {
  bottom: 80px !important; // 将action-sheet向上偏移，避免被底部操作栏遮挡
  z-index: 99999 !important; // 使用更大的z-index确保显示在操作栏上方

  .wd-action-sheet-item {
    padding: 15px 0;
  }
}

// 调整action-sheet的遮罩层和外层容器z-index
:deep(.wd-action-sheet-container),
:deep(.wd-action-sheet-wrapper),
:deep(.wd-action-sheet-popup) {
  z-index: 99999 !important; // 确保所有相关容器都有足够高的z-index
}

:deep(.wd-action-sheet-overlay) {
  z-index: 99998 !important; // 遮罩层稍低一点
}
</style>
